<!-- 分享页面 -->
<template>
	<view class="item-block">
		<view class="centen">
			<view class="picture">
				<view class="top">
					<view class="toptitle">
						<span class="iconfont icon-rili"></span>
						<span class="time_text">{{timetext}}</span>
					</view>
					<view class="address_item">
						<span class="iconfont icon-dizhi"></span>
						<span class="address_text">{{idobj.placeName}}</span>
					</view>
				</view>
				<view class="center">
					<view class="imglogo">
						<u-avatar :src="idobj.teamLogo" size="150"></u-avatar>
					</view>
					<view class="imgtitle">
						{{idobj.teamName}}
					</view>
				</view>
				<view class="but">
					<view class="" style="display: flex; align-items: center;">
						<view class="">
							<u-avatar :src="userInfo.avatarUrl" size="40"></u-avatar>
						</view>
						<view class="" style="margin-left: 10px;">
							{{userInfo.nickName}}
						</view>
					</view>
					<view class="" style="display: flex; flex-direction: column; align-items: flex-end;">
						<view class="">
							来组队打球
						</view>
						<view class="">
							结识志同道合的球友
						</view>
					</view>
				</view>
			</view>
			<view class="form-but">
				<u-button type="primary" icon="weixin-fill" text="分享到微信" open-type="share"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatCurrentTime
	} from '../../utils/utils.js'
	export default {
		data() {
			return {
				navBarTop: "",
				navBarLeft: "",
				navBarHeight: "",
				idobj: {},
				userInfo: {},
				timetext: '',
				accesstoken: ''
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('userinfokey')
		},
		onLoad(options) {
			// 从路由参数中获取传递的值
			this.idobj = JSON.parse(decodeURIComponent(options.id))


		},
		onShareAppMessage(res) {
			const info = uni.getStorageSync('userinfokey')
			const obj = {
				type: this.idobj.type, //用来判断代表是分享过来的
				name: info.nickName,
				teamId: this.idobj.teamId,
				raceId: this.idobj.raceId,
				orderId: this.idobj.orderId,
			}
			const objstr = JSON.stringify(obj);
			return {
				title: '邀请你加入' + this.idobj.teamName,
				path: '/pages/homepage/homepage?objinfo=' + encodeURIComponent(objstr),
				imageUrl: 'https://web.ptgolf.net/image/webchat/25.png',

			}
		},

		mounted() {
			this.timetext = formatCurrentTime()
			//获取胶囊位置
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarTop = menuButtonInfo.top;
			this.navBarHeight = menuButtonInfo.height;
			this.navBarLeft = menuButtonInfo.left;
			// this.asstoken()

		},
		methods: {
			// 这个是实现二维码扫码进入分享页,目前还没实现,因为accesstoken报错,
			
			
			// asstoken() {
			// 	const that = this
			// 	this.$request(`/wechat/getAccessToken`, 'get')
			// 		.then(
			// 			res => {
			// 				that.accesstoken = res.data.data
			// 				that.scanfn()
			// 			})
			// },
			// scanfn() {
			// 	const that = this
			// 	const data = {
			// 		access_token: this.accesstoken,
			// 		scene: 'a:1/b:2/c:3',
			// 		page: 'pages/homepage/homepage'
			// 	}
			// 	uni.request({
			// 		method: 'post',
			// 		data: data,
			// 		url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN`,
			// 		dataType: 'json',
			// 	}).then((response) => {
			// 		console.log(response);
			// 	}).catch(error => {
			// 		console.log(error);

			// 	})
			// }
		}
	}
</script>

<style scoped lang="scss">
	.item-block {
		height: 100vh;
		overflow: auto;
		background-color: #000;

		background-image: url('https://web.ptgolf.net/image/webchat/24.png');
		background-size: 100% 100%;

		.centen {
			padding-left: 20px;
			padding-right: 20px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.title {
				color: #fff;
			}

			.picture {
				height: 500px;
				width: 100%;
				// clip-path: polygon(0 0, 100% 0, 0 100%);
				// transform: skew(-20deg, -20deg);  /* 沿 x 和 y 轴同时倾斜 */
				border-top-left-radius: 40px;
				/* 设置左上角圆角的弧度 */
				background-image: url('https://web.ptgolf.net/image/webchat/23.png');
				background-size: 100% 100%;
				// background-color: #de3600;
				margin: 10px 0;
				position: relative;

				.center {
					position: absolute;
					top: 56%;
					left: 50%;
					transform: translate(-50%, -50%);
					display: flex;
					flex-direction: column;
					align-items: center;

					.imglogo {}

					.imgtitle {
						margin-top: 10px;
						font-weight: 600;
						color: #de3600;
						font-size: 20px;
					}
				}

				.but {
					font-size: 15px;
					padding: 0 10px;
					position: absolute;
					bottom: 20px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: calc(100% - 20px);
				}

				.top {
					position: absolute;
					top: 70px;
					left: 20px;

					.toptitle {
						color: #fff;

						.time_text {
							font-size: 12px;
						}

						.icon-rili {
							font-size: 15px;
							margin-right: 3px;
						}
					}

					.address_item {
						margin-top: 5px;

						.icon-dizhi {
							font-size: 15px;
							border-radius: 10px;
							// padding: 2px;
							// background-color: #de3600;
							color: #fff;
							margin-right: 3px;
						}

						.address_text {
							color: #fff;
							font-size: 12px;

						}
					}
				}
			}

			.form-but {
				width: 100%;

				// ::v-deep .u-button--square {
				// 	border: 30px !important;
				// }

				::v-deep .u-button {
					border: 0px;
					border-radius: 30px !important;
					background-color: #de3600;
					height: 47px;
				}
			}
		}

	}
</style>